<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>导出请假单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
            font-size: 24px;
            font-weight: bold;
        }

        .form-inline {
            text-align: center;
            margin-bottom: 20px;
        }

        .form-group {
            margin-right: 10px;
        }

        .form-control {
            padding: 5px 15px;
            font-size: 14px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }

        .btn {
            font-size: 14px;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #0056b3;
        }

        .table-responsive {
            margin-top: 20px;
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        th, td {
            padding: 12px 15px;
            text-align: center;
            border: 1px solid #ddd;
        }

        th {
            background-color: #f4f4f4;
            color: #333;
            font-weight: bold;
        }

        tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tbody tr:hover {
            background-color: #f1f1f1;
            cursor: pointer;
        }

        .loading {
            text-align: center;
            font-size: 18px;
            color: #007bff;
            display: none;
        }

        #exportContainer {
            text-align: center;
            margin-top: 20px;
        }

        #exportContainer .btn-custom {
            background-color: #28a745;
            color: white;
            font-size: 16px;
            padding: 10px 20px;
        }

        #exportContainer .btn-custom:hover {
            background-color: #218838;
        }

    </style>
</head>
<body>

<div class="container">
    <h2>导出请假单</h2>

    <!-- 查询学期表单 -->
    <div class="form-inline">
        <div class="form-group">
            <label for="term" class="mr-2">学期：</label>
            <select id="term" name="term" class="form-control">
                <option value="春季学期">第一学期</option>
                <option value="秋季学期">第二学期</option>
            </select>
        </div>
        <button type="submit" class="btn btn-primary btn-custom" id="queryBtn">查询</button>
    </div>

    <!-- 加载提示 -->
    <div id="loading" class="loading">加载中...</div>

    <!-- 请假单数据表格 -->
    <div class="table-responsive">
        <table id="leaveTable" class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>请假ID</th>
                <th>课程ID</th>
                <th>请假原因</th>
                <th>请假天数</th>
                <th>学号</th>
                <th>申请时间</th>
                <th>状态</th>
                <th>审核日期</th>
                <th>意见</th>
            </tr>
            </thead>
            <tbody>
            <!-- 请假数据将通过Ajax加载 -->
            </tbody>
        </table>
    </div>

    <!-- 导出按钮 -->
    <div id="exportContainer" class="text-center" style="display: none;">
        <button type="button" class="btn btn-custom" id="exportBtn">导出 Excel</button>
    </div>

    <!-- 提示信息 -->
    <div id="noDataMessage" class="alert alert-warning" style="display: none;">
        没有符合条件的请假记录可供导出。
    </div>

</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
    $(document).ready(function() {
        var leaveData = []; // 用于存储查询到的数据

        // 查询学期表单提交
        $("#queryBtn").on("click", function(event) {
            event.preventDefault(); // 阻止默认提交行为

            // 获取学期参数
            var term = $("#term").val();

            // 显示加载提示
            $("#loading").show();
            $("#leaveTable tbody").html(""); // 清空之前的表格数据
            $("#noDataMessage").hide(); // 隐藏没有数据的提示
            $("#exportContainer").hide();  // 隐藏导出按钮

            // 发送 Ajax 请求加载请假单数据
            loadLeaveRecords(term);
        });

        // 加载请假单数据
        function loadLeaveRecords(term) {
            $.ajax({
                url: "/attend_war/export",  // 后台查询接口（需要改为实际的接口URL）
                type: "GET",
                data: { term: term},  // 传递学期参数
                dataType: "json",
                success: function(response) {
                    // 隐藏加载提示
                    $("#loading").hide();

                    if (response && response.length > 0) {
                        // 保存查询到的数据
                        leaveData = response;

                        // 填充表格数据
                        let tableContent = '';
                        $.each(response, function(index, leave) {
                            tableContent += '<tr>' +
                                '<td>' + leave.leaveID + '</td>' +
                                '<td>' + leave.courseID + '</td>' +
                                '<td>' + leave.reason + '</td>' +
                                '<td>' + leave.daynum + '</td>' +
                                '<td>' + leave.stuNo + '</td>' +
                                '<td>' + leave.applytime + '</td>' +
                                '<td>' + (leave.status === '0' ? '未审核' : '已审核') + '</td>' +
                                '<td>' + leave.audittime + '</td>' +
                                '<td>' + leave.opinion + '</td>' +
                                '</tr>';
                        });
                        $("#leaveTable tbody").html(tableContent);

                        // 显示导出按钮
                        $("#exportContainer").show();
                    } else {
                        // 没有数据时显示提示
                        $("#leaveTable tbody").html("<tr><td colspan='9'>没有符合条件的请假记录。</td></tr>");
                        $("#noDataMessage").show();
                        $("#exportContainer").hide();  // 隐藏导出按钮
                    }
                },
                error: function(xhr, status, error) {
                    // 请求失败时
                    $("#loading").hide();
                    $("#leaveTable tbody").html("<tr><td colspan='9'>查询失败，请稍后重试。</td></tr>");
                    $("#exportContainer").hide();  // 隐藏导出按钮
                    $("#noDataMessage").show();
                }
            });
        }

        // 导出按钮点击事件
        $("#exportBtn").on("click", function() {
            if (leaveData.length === 0) {
                alert("没有可导出的数据！");
                return;
            }

            // 发送 POST 请求导出数据
            $.ajax({
                url: "/attend_war/export",  // 导出接口
                type: "POST",
                data: { semester: $("#term").val() }, // 传递学期参数
                success: function(response) {
                    // 处理导出的响应（如：提示下载或处理其他逻辑）
                    alert("导出成功！");
                },
                error: function(xhr, status, error) {
                    alert("导出失败，请稍后重试。");
                }
            });
        });
    });
</script>

</body>
</html>
